<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="创建行程" @clickLeft="back"></uni-nav-bar>
	<view class="container">
		<swiper class="index-swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
			<swiper-item v-for="(item,index) in linesInfo.linePicUrl" :key="index">
				<img :src="item" alt="">
			</swiper-item>
		</swiper>
		<uni-forms class="form" ref="form" :modelValue="formData" label-width='auto' :rules="rules">
			<uni-forms-item name="itineraryTitle" required>
			<view class="bg-white uni-flex w100 boxsiz mt30 p3020">
				<view><text class="mr50">队伍名称</text></view>
				<view class="flex1"><input class="uni-input flex1 font-28 text-right" maxlength="30" placeholder="请输入标题" v-model="formData.itineraryTitle" /></view>
				<view class="num">{{formData.itineraryTitle.length}}/30</view>
			</view>
			</uni-forms-item>
			<view class="bg-white xc-desc mt30 p3020">
				<view class="line-h50">
					<text>线路名称&nbsp;&nbsp;{{linesInfo.linesTitle}}</text>
				</view>
				<view class="line-h50">
					<text>线路城市&nbsp;&nbsp;{{linesInfo.linesCityDesc}}</text>
				</view>
				<view class="line-h50 is-flex mb25">
					线路难度&nbsp;&nbsp;<uni-rate :readonly="true" max="5" v-model="linesInfo.linesStar" />
				</view>
				<view class="">
					<text>{{linesInfo.linesBrief}}</text>
				</view>
				<!-- <text>雨崩5天4晚1k+拿下，新手放心冲!</text>
				<text>雨崩5天4晚1k+拿下，新手放心冲!</text>
				<text>雨崩5天4晚1k+拿下，新手放心冲!来一次雨崩才知道什么叫天堂在左，雨崩在右!朝圣绝美的日照金山，淋神瀑，转冰湖，S五彩经幡涤荡心灵，还能免费入住梅里雪山脚下的奢华观景酒店!</text>
				<text>【为什么选择雨崩徒步】<br />
					---首次徒步推荐指数:5颗星 <br />
					---人均预算:1680 <br />
					---成团机制:2人成行，1人可报影<br />
					---行程时间:5天4晚国<br />
					---每天徒步:14-16公里</text>
				<text>线路计划<br />
					D0:丽江集合<br />
					D1:丽江一小中甸一月亮湾-飞来寺<br />
					D2:飞来寺-澜沧江一尼农峡谷一雨崩村<br />
					D3:雨崩村一沙棘林一笑农大本营-冰湖-雨崩村<br />
					D4:雨崩村一尼农峡谷一丽江</text>
				<text>
					为什么选择我们<br />
					---对全程纯玩、0购物<br />
					---一人成团，无单房差,可小团定制<br />
					---住宿、交通、门票、保险一价全含心赠送<br />
					---集合日住宿、徒步证书、纪念奖牌..<br />
					---全程专职专线向导带队，并提供基础拍照服务<br />
					---贴心精选雨崩当地高端民宿，让你无忧入住
				</text> -->
			</view>
			<uni-forms-item name="userLimit" required>
				<view class="bg-white w100 uni-flex boxsiz mt30 p3020">
					<view><text class="mr50">上限人数</text></view>
					<view class="flex1 uni-flex">
						<input type="number" class="uni-input font-28 text-right" placeholder="请输入上限人数" v-model="formData.userLimit" />
						<text>人</text>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="compositionNum" required>
				<view class="bg-white uni-flex w100 boxsiz mt30 p3020">
					<view><text class="mr50">成团人数</text></view>
					<view class="flex1 uni-flex">
						<input type="number" class="uni-input font-28 text-right" placeholder="请输入成团人数" v-model="formData.compositionNum" />
						<text>人</text>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="itineraryFee" required>
				<view class="bg-white uni-flex w100 boxsiz mt30 p3020">
					<view><text class="mr50">行程费用</text></view>
					<view class="flex1 uni-flex">
						<input type="number" class="uni-input font-28 text-right" placeholder="请输入行程费用" v-model="formData.itineraryFee" /><text>元/人</text>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item name="expireDate" required>
			<view class="bg-white uni-flex w100 boxsiz mt30 p3020">
				<view><text class="mr50">报名期限</text></view>
				<view class="flex1 uni-flex">
					<uni-datetime-picker type="datetime" :border="false" :start="startDate" :end="endDate" :minute-step="10"
						v-model="formData.expireDate" @change="changebm" />
					<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</view>
		</uni-forms-item>
		<uni-forms-item name="collectDate" required>
			<view class="bg-white uni-flex w100 boxsiz mt30 p3020">
				<view><text class="mr50">集合时间</text></view>
				<view class="flex1 uni-flex">
					<uni-datetime-picker type="datetime" :border="false" :start="startDate" :end="endDate" :minute-step="10"
						v-model="formData.collectDate" @change="changejh" />
					<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</view>
		</uni-forms-item>
		<uni-forms-item name="collectAddress" required>
			<view class="bg-white uni-flex w100 boxsiz mt30 p3020">
				<view><text class="mr50">集合地点</text></view>
				<view class="flex1 uni-flex" @click="toCommunity">
					<input class="uni-input font-28 text-right" placeholder="点击选择地图" v-model="formData.collectAddress" />
					<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</view>
		</uni-forms-item>
			<uni-forms-item name="itineraryContent" required>
				<view class="bg-white mt30 p3020">
					<view class="uni-flex mb25">
						<view class="">
							<text>行程说明</text>
						</view>
						<view class="num">{{formData.itineraryContent.length}}/1000</view>
					</view>
					<view class="is-flex W100">
						<textarea style="height: 220px;" maxlength="1000" class="uni-input w100 font-28 text-right" placeholder="请输入行程说明"
							v-model="formData.itineraryContent" />
					</view>
				</view>
			</uni-forms-item>
			<view class="bg-white share-reward color-black mt30 p3020">
				<text class="b-font color-black">组队推广已开启</text>
				<view class="is-flex">
					<uni-icons type="info" size="20" color="#888"></uni-icons><text
						class="color-gray">开启推广后行程将在组队广场向用户展示</text>
				</view>
			</view>
			<view class="bg-white share-reward color-black mt30 p3020 mb130">
				<view class="is-flex">
					<view class="mr50">
						<text class="b-font color-black">分享推广</text>
					</view>
					<view class="">
						<uni-data-checkbox v-model="formData.promotionSwitch" :localdata="promotionSwitchs" />
					</view>
				</view>
				<view class="is-flex">
					<view class="">
						<uni-icons type="info" size="20" color="#888"></uni-icons>
					</view>
					<view class="">
						<view class="color-gray text-justify">开启推广后平台其他用户可使用分享链接邀请好友报名</view>
						<view class="color-gray text-justify">关闭推广后仅行程发布者可使用行程分享功能</view>
					</view>
				</view>
			</view>
			<!-- <view class="bg-white share-reward color-black mt30 p3020 pb130">
				<text class="b-font color-black">关于服务费</text>
				<view class="is-flex">
					<uni-icons type="info" size="20" color="#888"></uni-icons>
					<text
						class="color-gray text-justify">平台服务费标准：单笔订单上限为5%，最低为1.6%。<br />多种推广方式不叠加收取，仅按订单来源取单一标准计算。</text>
				</view>
			</view> -->
		</uni-forms>
		<view class="fixed-bottom-wrap ">
			<view class="schdule-card uni-flex" @click="subForm">
				<view class="flex-item sign">
					<text>发布行程</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	export default {
		components: {

		},
		data() {
			return {
				linesInfo: {},
				formData: {
					travelLinesId: '',
					itineraryTitle: '',
					userLimit: '',
					compositionNum: '',
					itineraryFee: '',
					expireDate: '',
					collectDate: '',
					collectAddress: '',
					collectLng: '', //集合地点经度
					collectLat: '', //集合地点纬度
					itineraryContent: '',
					promotionSwitch: 'T'
				},
				// 单选数据源
				promotionSwitchs: [{
					text: '是',
					value: 'T'
				}, {
					text: '否',
					value: 'F'
				}],
				startDate: Date.now(),
				endDate: Date.now() + 180 * 24 * 3600 * 1000,
				rules: {
				itineraryTitle: {
					rules: [{
						required: true,
						errorMessage: '请输入队伍标题',
					}],
				},
				userLimit: {
					rules: [{
						required: true,
						errorMessage: '请输入上限人数',
					}],
				},
				compositionNum: {
					rules: [{
						required: true,
						errorMessage: '请输入成团人数',
					}],
				},
				itineraryFee: {
					rules: [{
						required: true,
						errorMessage: '请输入行程费用',
					}],
				},
				itineraryContent: {
					rules: [{
						required: true,
						errorMessage: '请输入行程说明',
					}],
				},
				expireDate: {
					rules: [{
						required: true,
						errorMessage: '请选择报名期限',
					}],
				},
				collectDate: {
					rules: [{
						required: true,
						errorMessage: '请选择集合时间',
					}],
				},
				collectAddress: {
					rules: [{
						required: true,
						errorMessage: '请选择集合地点',
					}],
				},
				promotionSwitch: {
					rules: [{
						required: true,
						errorMessage: '请选择是否开启分享推广',
					}],
				}
			},
			}
		},
		computed: {},
		watch: {},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onShow(option) {
			if (option.param) {
				let params = JSON.parse(decodeURIComponent(option.param));
				let id = params.data;
				this.formData.travelLinesId = id;
				this.getLineInfo(id);
			}
		},
		
		onLoad(option) {
			if (option.param) {
				let params = JSON.parse(decodeURIComponent(option.param));
				let id = params.data;
				this.formData.travelLinesId = id;
				this.getLineInfo(id);
			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			// 获取线路信息
			getLineInfo(ID) {
				api.getLinesInfo({
					params: {
						linesId: ID
					}
				}).then(res => {
					if (res.code === 0) {
						this.linesInfo = res.data;
					} else {}
				}).catch()
			},
			// 城市选择器
			bindRegionChange: function(e) {
				this.region = e.detail.value;
			},
			// 报名时间change事件
			changebm: function(e) {
				this.formData.expireDate = e.detail.value;
			},
			// 集合时间change事件
			changejh: function(e) {
				this.formData.collectDate = e.detail.value;
			},
			// 页面跳转
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			toCommunity() {
				const that = this
				uni.getSetting({
					success: (res) => {
						const status = res.authSetting
						// 如果当前设置是：不允许，则需要弹框提醒客户，需要前往设置页面打开授权
						if (!status['scope.userLocation']) {
							uni.showModal({
								title: "是否授权当前位置",
								content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
								success: (tip) => {
									if (tip.confirm) {
										// 如果已经拒绝过，则需要打开设置页面，授权弹框不会弹出第二次，因为已经明确拒绝/确认过了（微信的原因）
										if (that.isDeny) {
											wx.openSetting({
												success: function(res) {
													// 在设置页面授权成功后再次获取位置信息
													uni.showToast({
														title: "授权成功",
													})
													that.isDeny = false
													// 修改授权后返回页面，弹框消失，需要再点一次
												},
												fail: (data) => {
													console.log(data)
													// isDeny 是否拒绝过授权，如果拒绝过，再点击按钮的话，弹框确认后就直接打开微信小程序设置页
													that.isDeny = true
												}
											})
											return
										}
										// 如果点击了确认，并且没有拒绝过微信系统授权弹框，则会弹出授权位置信息的弹框
										uni.authorize({
											scope: "scope.userLocation",
											success: (data) => {
												// 授权弹框点击确认
												console.log(data)
												// 如果用户同意授权，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
																] === true
															) {
															uni.showToast({
																title: "授权成功",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											},
											fail: (data) => {
												// 如果用户拒绝授权，则提示用户需要授权
												uni.showToast({
													title: "您已拒绝授权，请重新授权",
													icon: "none",
													duration: 1000
												})
												that.isDeny = true
											}
										})
									}
								}
							})
						} else {
							uni.chooseLocation({
								success: (res) => {
									that.formData.collectAddress = res.name;  //可更换为address
									that.formData.collectLng = res.longitude;
									that.formData.collectLat = res.latitude;
								},
								fail: (e) => {
									console.log(e);
								}
							})
						}
					},
					fail: () => {

					},
				})
			},
			subForm() {
				// 额外的行程费用校验
				if (this.formData.itineraryFee === '' || parseFloat(this.formData.itineraryFee) < 1) {
					uni.showToast({
						title: '行程费用不能小于1元',
						icon: 'none'
					});
					return;
				}
				
				// 表单验证
				this.$refs.form.validate().then(valid => {
					if (valid) {
						// 验证通过，跳转到下一步
						uni.navigateTo({
							url: '/pages/agreement/group_privacy?param='+encodeURIComponent(JSON.stringify(this.formData))
						})
					} else {
						// 验证失败，显示提示
						uni.showToast({
							title: '请完善表单信息',
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
		background-color: #f8f8f8;
	}
	.wd70{
		width: 70%;
	}

	.index-swiper {
		width: 100%;
		height: 670rpx;
	}

	.index-swiper image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	
	::v-deep.uni-data-checklist .checklist-group .checklist-box {
		margin-right: 25px !important;
	}

	.bottom-wrap {
		position: relative;
		top: -60rpx;
	}

	.schduleForm {
		.is-bt {
			position: relative;
			margin-right: 15px;
		}

		.is-bt::after {
			content: "*";
			position: absolute;
			right: 0;
			color: $uni-text-color-red;
		}
	}

	.is-flex {
		display: flex;
		align-items: center;
	}

	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}

	::v-deep .uni-date-x--border {
		border: none !important;
	}
	

	.xc-desc {
		text {
			margin-bottom: 30rpx;
			display: block;
		}
	}

	::v-deep.uni-forms-item__label {
		top: 22px;
	}
	::v-deep.uni-date-btn--ok {
		padding: 0 15px 80px;
	}
	.mb130 {
		margin-bottom: calc(160rpx + max(env(safe-area-inset-bottom),20px));
	}

	.share-reward {
		.color-black {
			display: block;
			margin-bottom: 20rpx;
		}

		.is-flex {
			align-items: flex-start;
		}

		.color-gray {
			line-height: 1.8;
			text-align: justify;
			margin-left: 20rpx;
		}
	}


	.schdule-card {
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: 60rpx;
		border-top: 1px solid #f8f8f8;
		padding-bottom: max(env(safe-area-inset-bottom),20px);

		.flex-item {
			padding-top: 10rpx;
			width: 25%;
			text-align: center;
			line-height: 40rpx;
		}

		.flex-item:last-child {
			width: 100%;
			padding-top: 0;
		}

		text {
			display: block;
		}

		.sign {
			height: 100%;
			color: $uni-text-color-white;
			background-color: $uni-text-color-green;
			font-size: 32rpx;
			line-height: 100%;

			text {
				line-height: 100rpx;
			}
		}
	}
</style>